<template lang="pug">
.list
  .list-header
    .list-header-container
      .list-header-tabs
        el-radio-group(size="small" v-model="tabActive" @change="changeRadioGroup")
          el-radio-button(v-for="item in tabs", :label="item.value") {{item.label}}
      .list-header-filter
        header-filter(:filter="filter")
  .material-list(v-if="list.length")
    .material-item(v-for="item in list" @click="seeDetail(item)")
      .material-item-img(:style="item.coverImg | filterUrl")
        .material-item-status
          .material-item-status-finish(:class="{ 'finish': item.isFinish }") {{item.isFinish ? '已结束' : '进行中'}}
          .material-item-status-finish.feedback(v-if="item.hasFeedback") 已反馈
      .material-item-bd
        .material-item-header
          .material-item-name {{item.demandName}}
          .material-item-message
            .iconfont.el-icon-chat-line-square
            span {{item.viewAmount}}
        .material-item-tags
          .tag-item(v-for="tag, index in item.style" v-if="index < 4") {{tag.styleName}}
        .material-item-info
          .info-head
          .info-content
            .info-company {{item.userName}}
            .info-time {{item.createTime | filterDate}}
  .material-empty(v-else)
    img(src="../../../static/images/empty_2.png")
    .material-empty-txt 这里空空如也~~
  .index-pagination
    .pagination-total 共 {{total}} 条
    .pagination-sizes {{pageSize}} 条/页
    el-pagination(
      background
      layout="prev, pager, next, jumper"
      :total="total"
      :page-size="pageSize"
      :current-page="page"
      @current-change="currentChange"
    )
  //- keep-alive(exclude="")
    router-view
</template>

<script>
import { getFindingMaterialList, getStyles } from 'api'
import headerFilter from '@/components/headerFilter'
export default {
  name: 'findList',
  components: {
    headerFilter
  },
  data () {
    return {
      total: 0,
      tabActive: '',
      pageSize: 20,
      page: 1,
      styles: [],
      tabs: [
        { label: '全部', value: '', key: '' },
        { label: '进行中', value: false, key: 'isFinish' },
        { label: '已反馈', value: 'hasFeedback', key: 'hasFeedback' },
        { label: '已结束', value: true, key: 'isFinish' }
      ],
      filter: [
        [
          {
            name: '材料名称：',
            type: 'default',
            key: 'demandName',
            demandName: ''
          },
          {
            name: '近段时间：',
            type: 'select',
            key: 'time',
            time: '',
            optLabel: 'name',
            optValue: 'value',
            options: [
              { name: '近一周', value: 'week' },
              { name: '近一个月', value: 'month' },
              { name: '一个月前', value: 'monthAgo' }
            ]
          },
          {
            name: '时间选择：',
            type: 'date',
            key: 'timeSelect',
            timeSelect: []
          }
        ],
        [
          {
            name: '业态：',
            type: 'select',
            key: 'styleId',
            styleId: '',
            optLabel: 'styleName',
            optValue: 'styleId',
            options: []
          },
          {},
          {
            type: 'handle',
            buttons: [
              { name: 'primary', label: '查询', handle: this.search },
              { label: '重置', handle: this.reset }
            ]
          }
        ]
      ],
      list: []
    }
  },
  methods: {
    seeDetail (item) {
      this.$router.push({ name: 'findMaterialDetail', params: { id: item.id } })
    },
    changeRadioGroup (item) {
      let filter = this.tabs.find(row => row.value === item)
      let query = { ...this.$route.query, currentPage: 1 }
      delete query.isFinish
      if (query.hasFeedback) delete query.hasFeedback
      if (filter.label !== '全部') query[filter.key] = filter.value
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    currentChange (page) {
      this.$router.replace({ name: this.$route.name, query: { ...this.$route.query, currentPage: page, tm: new Date().getTime() } })
    },
    search () {
      let query = {}
      this.filter.map(row => row.map(v => {
        if (v.key === 'timeSelect' && !v[v.key]) v[v.key] = []
        if (v[v.key]) query[v.key] = v[v.key]
      }))
      query['startTime'] = query['timeSelect'][0]
      query['endTime'] = query['timeSelect'][1]
      Object.keys(query).forEach(v => {
        if (v === 'timeSelect' || !query[v]) delete query[v]
      })
      let filter = this.tabs.find(row => row.value === this.tabActive)
      delete query.isFinish
      if (query.hasFeedback) delete query.hasFeedback
      if (filter.label !== '全部') query[filter.key] = filter.value
      this.$router.replace({ name: this.$route.name, query: { ...query, tm: new Date().getTime() } })
    },
    async initFilter () {
      try {
        this.filter.forEach(row => row.forEach(v => {
          if (v.key === 'styleId') v.options = this.styles
          if (v.key === 'timeSelect' && this.$route.query['startTime']) {
            v[v.key] = [ this.$route.query['startTime'], this.$route.query['endTime'] ]
          }  else {
            if (v.key === 'styleId') v[v.key] = Number(this.$route.query[v.key]) || ''
            else v[v.key] = this.$route.query[v.key] || ''
          }
        }))
        if (this.$route.query.isFinish !== '' && this.$route.query.isFinish !== undefined) {
          this.tabActive = JSON.parse(this.$route.query.isFinish)
        }
        if (this.$route.query.hasFeedback) {
          this.tabActive = this.$route.query.hasFeedback
        }
        if (this.$route.query.isFinish === undefined && !this.$route.query.hasFeedback) {
          this.tabActive = ''
        }
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    reset () {
      let filter = this.tabs.find(row => row.value === this.tabActive)
      let query = {}
      delete query.isFinish
      if (query.hasFeedback) delete query.hasFeedback
      if (filter.label !== '全部') query[filter.key] = filter.value
      this.$router.replace({ name: this.$route.name, query: { ...query } })
    },
    async getStyles () {
      try {
        const { ResultSet } = await this.$axios.post(getStyles)
        this.styles = ResultSet.userData.businessStyles
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    },
    async getList () {
      try {
        let query = { ...this.$route.query, currentPage: this.$route.query.currentPage || 1, pageLines: this.pageSize }
        const { ResultSet } = await this.$axios.post(getFindingMaterialList, { content: { ...query  } })
        // ResultSet.userData.result.forEach(item => {
        //   item.tags = item.projectType.split(',')
        // })
        this.page = Number(this.$route.query.currentPage) || 1
        this.total = ResultSet.userData.totalSize
        this.list = ResultSet.userData.result
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(async vm => {
      vm.getList()
      await vm.getStyles()
      vm.initFilter()
    })
  },
  beforeRouteUpdate (to, from, next) {
    next()
    this.getList()
    this.initFilter()
  }
} 
</script>

<style lang="scss" scoped>
.list {
  padding: 0 24.5px 32px;
}
.list-header {
  padding: 0 7.5px;
}
.list-header-container {
  width: 100%;
  padding: 32px 24px;
  background: #FFFFFF;
  border-radius: 4px;
}
.list-header-filter {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #CBCBCB;
}
.filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  &:last-child {
    margin-bottom: 0;
  }
}
.filter-col {
  min-width: 320px;
  margin-right: 30px;
  display: flex;
  align-items: center;
  .filter-col-label {
    width: 100px;
    padding-right: 10px;
    text-align: right;
    font-size: 14px;
    color: #363636;
  }
  .filter-col-bd {
    width: 220px;
    .el-select {
      width: 100%;
    }
    .el-input {
      width: 100%;
    }
    &.filter-col-handle {
      text-align: right;
    }
  }
}
.material-list {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
}
.material-item {
  width: 317px;
  background: #FFFFFF;
  border-radius: 4px;
  margin: 0 7.5px 16px;
  padding: 20px;
  &:hover {
    box-shadow: 0px 5px 18px 2px rgba(44, 44, 44, 0.2);
  }
}
.material-item-img {
  position: relative;
  width: 100%;
  height: 196px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.material-item-status {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}
.material-item-status-finish {
  padding: 5px 10px;
  font-size: 14px;
  color: #fff;
  background: #FF2E42;
  &.finish {
    background: #999999;
  }
  &.feedback {
    background: #363636;
  }
}
.material-item-bd {
  margin-top: 20px;
}
.material-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.material-item-name {
  font-size: 16px;
  font-weight: bold;
  color: #363636;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.material-item-message {
  display: flex;
  align-items: center;
  color: #8D8D8D;
  font-size: 14px;
  .iconfont {
    margin-right: 5px;
  }
}
.material-item-tags {
  margin-top: 8px;
  display: flex;
  align-items: center;
  .tag-item {
    margin-right: 8px;
    padding: 6px 10px;
    background: #F3F3F3;
    border-radius: 4px;
    font-size: 12px;
    color: #989898;
  }
}
.material-item-info {
  margin-top: 24px;
  display: flex;
  .info-head {
    width: 32px;
    height: 32px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .info-content {
    margin-left: 8px;
    .info-company {
      font-size: 14px;
      color: #868686;
    }
    .info-time {
      margin-top: 8px;
      font-size: 14px;
      color: #868686;
    }
  }
}
.index-pagination {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 14px;
  color: #7A7A7A;
  .pagination-total {
    margin-right: 10px;
  }
  .pagination-sizes {
    margin-right: 10px;
  }
}
.material-empty {
  padding: 100px 0;
  text-align: center;
  .material-empty-txt {
    margin-top: 10px;
    color: #888A8D;
    font-size: 14px;
  }
}
</style>
